<template>
  <div ref="TMap_" class="TMap" ></div>
  <div class="legends" v-if="props.showLegends">
    <el-row class="legends-list" :gutter="15">
      <el-col 
        class="legends-list--item" 
        v-for="(item,index) in props.config.legendList" 
        :key="index" 
        :xs="6" :sm="6" :md="4" :lg="4" :xl="4"
      >
        <span 
          :style="{
            background: item.color
          }"
          class="legends-list--item-block"
        ></span>
        <span>
          {{ item.label }}
        </span>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { loadTMap } from '@/utils/map.ts';
import { reactive, onMounted, markRaw, ref } from 'vue'
const TMap_ = ref()
let props = defineProps<{
  showLegends?: boolean
  config: {
    legendList: company[]
  }
}>()

let data = reactive({
  zoom: 1,
  tMap: {} as any,
  marker: {} as any
})

function init() {
  data.tMap = markRaw(new TMap.Map(TMap_.value, {
    center: new TMap.LatLng(30.433044,103.818130), //设置地图中心点坐标
    zoom: 10.9, //设置地图缩放级别
    showControl: false,
    pitchable: true,
    // pitch: 90,
    draggable: false,
    scrollable: false,
    doubleClickZoom: false,
    baseMap: {			//底图设置（参数为：VectorBaseMap对象）
      type: 'vector',	//类型：失量底图
      features: ['base','point']
    }
  }));
  data.tMap.willReadFrequently = true
  data.tMap.setMapStyleId('style1');
  highlight();
  document.querySelector('.TMap > div')!.setAttribute('style', 'display: none;');
  initMarker()
}


function highlight() {
  var paths = [[{'lat':30.526268,'lng':103.820338,'height':0},{'lat':30.51772985,'lng':103.8249126,'height':0},{'lat':30.50151766,'lng':103.828899,'height':0},{'lat':30.50314245,'lng':103.8360855,'height':0},{'lat':30.50704629,'lng':103.8389845,'height':0},{'lat':30.50471473,'lng':103.8432982,'height':0},{'lat':30.50537734,'lng':103.8481698,'height':0},{'lat':30.50328405,'lng':103.8500862,'height':0},{'lat':30.50570151,'lng':103.8540833,'height':0},{'lat':30.50442162,'lng':103.8580356,'height':0},{'lat':30.50637555,'lng':103.8590111,'height':0},{'lat':30.50649455,'lng':103.8609041,'height':0},{'lat':30.50810355,'lng':103.8605731,'height':0},{'lat':30.50937205,'lng':103.8640598,'height':0},{'lat':30.50636762,'lng':103.8679953,'height':0},{'lat':30.50604288,'lng':103.8744734,'height':0},{'lat':30.5038169,'lng':103.8747604,'height':0},{'lat':30.5035479,'lng':103.8765434,'height':0},{'lat':30.50107621,'lng':103.8779141,'height':0},{'lat':30.49881544,'lng':103.8838307,'height':0},{'lat':30.49585661,'lng':103.8822595,'height':0},{'lat':30.49255661,'lng':103.8838961,'height':0},{'lat':30.4957689,'lng':103.8878833,'height':0},{'lat':30.49645477,'lng':103.8963237,'height':0},{'lat':30.49106322,'lng':103.900505,'height':0},{'lat':30.48781973,'lng':103.9067346,'height':0},{'lat':30.47978078,'lng':103.9100837,'height':0},{'lat':30.47601938,'lng':103.9094449,'height':0},{'lat':30.47352301,'lng':103.914043,'height':0},{'lat':30.46272505,'lng':103.916936,'height':0},{'lat':30.4603204,'lng':103.9135513,'height':0},{'lat':30.4528991,'lng':103.9134995,'height':0},{'lat':30.44969544,'lng':103.9097865,'height':0},{'lat':30.44719956,'lng':103.912503,'height':0},{'lat':30.44694238,'lng':103.9166848,'height':0},{'lat':30.44415393,'lng':103.9154223,'height':0},{'lat':30.44481279,'lng':103.9167555,'height':0},{'lat':30.43785034,'lng':103.9220901,'height':0},{'lat':30.43739796,'lng':103.9249807,'height':0},{'lat':30.4337749,'lng':103.924588,'height':0},{'lat':30.4341439,'lng':103.925682,'height':0},{'lat':30.43098728,'lng':103.9282032,'height':0},{'lat':30.42952161,'lng':103.9254263,'height':0},{'lat':30.42683023,'lng':103.9264188,'height':0},{'lat':30.42428244,'lng':103.9339089,'height':0},{'lat':30.42166506,'lng':103.9332769,'height':0},{'lat':30.42037918,'lng':103.9349763,'height':0},{'lat':30.41693782,'lng':103.9331041,'height':0},{'lat':30.41363227,'lng':103.9357114,'height':0},{'lat':30.40617172,'lng':103.9337943,'height':0},{'lat':30.40095883,'lng':103.9359796,'height':0},{'lat':30.39306943,'lng':103.9312382,'height':0},{'lat':30.38951667,'lng':103.931264,'height':0},{'lat':30.38780227,'lng':103.929043,'height':0},{'lat':30.38693528,'lng':103.931411,'height':0},{'lat':30.38260504,'lng':103.9286339,'height':0},{'lat':30.37787249,'lng':103.9315004,'height':0},{'lat':30.37507482,'lng':103.9278767,'height':0},{'lat':30.37605578,'lng':103.9260601,'height':0},{'lat':30.37271423,'lng':103.9235657,'height':0},{'lat':30.37250468,'lng':103.9199981,'height':0},{'lat':30.36871849,'lng':103.9193382,'height':0},{'lat':30.36289079,'lng':103.9194993,'height':0},{'lat':30.36279854,'lng':103.9245034,'height':0},{'lat':30.36118056,'lng':103.9253314,'height':0},{'lat':30.35852017,'lng':103.9230514,'height':0},{'lat':30.3591789,'lng':103.9209948,'height':0},{'lat':30.3559086,'lng':103.9149313,'height':0},{'lat':30.35355084,'lng':103.9143516,'height':0},{'lat':30.3428865,'lng':103.9195559,'height':0},{'lat':30.33880556,'lng':103.9174914,'height':0},{'lat':30.34023712,'lng':103.9134546,'height':0},{'lat':30.33615461,'lng':103.9124297,'height':0},{'lat':30.33686073,'lng':103.9103608,'height':0},{'lat':30.32976584,'lng':103.9111633,'height':0},{'lat':30.33048449,'lng':103.9053634,'height':0},{'lat':30.33350356,'lng':103.902445,'height':0},{'lat':30.33169133,'lng':103.9003852,'height':0},{'lat':30.33272417,'lng':103.8979919,'height':0},{'lat':30.32987956,'lng':103.8959547,'height':0},{'lat':30.33111522,'lng':103.8931189,'height':0},{'lat':30.32757434,'lng':103.8841315,'height':0},{'lat':30.32910189,'lng':103.8841862,'height':0},{'lat':30.32895788,'lng':103.8862452,'height':0},{'lat':30.33535344,'lng':103.8824746,'height':0},{'lat':30.33786073,'lng':103.8828849,'height':0},{'lat':30.33996727,'lng':103.8801133,'height':0},{'lat':30.34582629,'lng':103.8775442,'height':0},{'lat':30.34627027,'lng':103.8738312,'height':0},{'lat':30.355895,'lng':103.8742286,'height':0},{'lat':30.35365372,'lng':103.8711759,'height':0},{'lat':30.34729128,'lng':103.8678103,'height':0},{'lat':30.34875943,'lng':103.8578831,'height':0},{'lat':30.34752445,'lng':103.8577411,'height':0},{'lat':30.34716239,'lng':103.8537847,'height':0},{'lat':30.3435055,'lng':103.8501735,'height':0},{'lat':30.34287449,'lng':103.8469645,'height':0},{'lat':30.34529916,'lng':103.8374056,'height':0},{'lat':30.34366412,'lng':103.8181483,'height':0},{'lat':30.34518255,'lng':103.8180958,'height':0},{'lat':30.34326673,'lng':103.8170788,'height':0},{'lat':30.34680901,'lng':103.797572,'height':0},{'lat':30.334971,'lng':103.773944,'height':0},{'lat':30.32807083,'lng':103.7668794,'height':0},{'lat':30.32913399,'lng':103.756909,'height':0},{'lat':30.33448601,'lng':103.758038,'height':0},{'lat':30.33885101,'lng':103.750111,'height':0},{'lat':30.33177499,'lng':103.745109,'height':0},{'lat':30.33149001,'lng':103.739654,'height':0},{'lat':30.33402199,'lng':103.733833,'height':0},{'lat':30.336802,'lng':103.73359,'height':0},{'lat':30.34117101,'lng':103.736162,'height':0},{'lat':30.348407,'lng':103.751231,'height':0},{'lat':30.354309,'lng':103.755539,'height':0},{'lat':30.363006,'lng':103.748706,'height':0},{'lat':30.37666901,'lng':103.74677,'height':0},{'lat':30.38455199,'lng':103.739196,'height':0},{'lat':30.409962,'lng':103.722207,'height':0},{'lat':30.425646,'lng':103.704929,'height':0},{'lat':30.43082,'lng':103.70479,'height':0},{'lat':30.434526,'lng':103.707791,'height':0},{'lat':30.44165199,'lng':103.719322,'height':0},{'lat':30.446051,'lng':103.71707,'height':0},{'lat':30.453777,'lng':103.730076,'height':0},{'lat':30.45955501,'lng':103.731979,'height':0},{'lat':30.46427401,'lng':103.735646,'height':0},{'lat':30.475966,'lng':103.735578,'height':0},{'lat':30.48139301,'lng':103.740339,'height':0},{'lat':30.496114,'lng':103.743962,'height':0},{'lat':30.50034001,'lng':103.749564,'height':0},{'lat':30.501642,'lng':103.764807,'height':0},{'lat':30.50005901,'lng':103.797762,'height':0},{'lat':30.50171199,'lng':103.797978,'height':0},{'lat':30.503939,'lng':103.792526,'height':0},{'lat':30.50792399,'lng':103.789154,'height':0},{'lat':30.51295901,'lng':103.788452,'height':0},{'lat':30.52154301,'lng':103.79654,'height':0},{'lat':30.52067299,'lng':103.810493,'height':0},{'lat':30.52260301,'lng':103.815622,'height':0},{'lat':30.52646999,'lng':103.818785,'height':0}]];
  new TMap.MultiPolyline({
    map: data.tMap,
    styles: {
      polyline: new TMap.PolylineStyle({
        color: 'rgba(255,59,0,0.9)', // 线条填充色，
        width: 4,
        lineCap: 'round',
        enableBloom: true // 是否启用泛光  注:为true才会有效果
      })
    },
    geometries: [
      {
        styleId: 'polyline', // 样式id
        paths: paths
      }
    ]
  });
}

function initMarker(){
  data.marker = new TMap.MultiMarker({
    id: 'marker-layer-' + Date.now(),
    map: data.tMap,
    styles: {
      marker: new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
      blue: new TMap.MarkerStyle({
        width: 22,
        height: 22,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
      aqua: new TMap.MarkerStyle({
        width: 22,
        height: 22,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
      green: new TMap.MarkerStyle({
        width: 22,
        height: 22,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
      orange: new TMap.MarkerStyle({
        width: 22,
        height: 22,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
      orangeLight: new TMap.MarkerStyle({
        width: 22,
        height: 22,
        anchor: { x: 16, y: 32 },
        src: ''
      }),
    },
    geometries:[]
  });
  
  new TMap.MultiLabel({
    id: 'label-layer-' + Date.now(),
    map: data.tMap,
    styles: {
      label: new TMap.LabelStyle({
        color: '#FFFFFF', // 颜色属性
        angle: 0, // 文字旋转属性
        alignment: 'center', // 文字水平对齐属性
        verticalAlignment: 'middle', // 文字垂直对齐属性
        width: 60,
        height: 20,
        offset: { x: -5, y: -40 },
        borderRadius: 10,
        backgroundColor: '#ff0000'
      })
    },
    geometries: [
      {
        id: 'label',
        styleId: 'label', 
        position: new TMap.LatLng(30.412711,103.808245), // 标注点位置
        content: '国资局', 
        properties: {
          title: 'label'
        }
      }
    ]
  });
}

function setMarker(geometries:any [] = [], styles: any [] = []) {
  let geometrieList = geometries.filter(item => item.position.lat)
  if (data.marker) {
    data.marker.setGeometries(geometrieList)
    data.marker.setStyles(styles)
  }
}

onMounted(() => {
  loadTMap('自己的腾讯mapkey').then(() => {
    init();
  });
})

defineExpose({
  setMarker,
  map: data.tMap,
})

</script>
<style lang="scss">
.TMap{
  height: 100%;
}
.legends{
  margin-top: 2rem;

  &-list{
    &--item{
      height: 2.4rem;
      line-height: 2.4rem;
      margin-bottom: 0.6rem;

      &-block{
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 0.2rem;
        vertical-align: middle;
        display: inline-block;
        margin-right: 0.6rem;
      }
    }
  }
}
</style>